<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="1000px"
    @close="close"
  >
    <el-form ref="formRef" label-width="80px" :model="form" :rules="rules">
      <el-form-item label="接口名称" prop="ApiTitle">
        <el-input v-model="form.ApiTitle" />
      </el-form-item>
      <el-form-item label="接口概述" prop="ApiShortxt">
        <el-input v-model="form.ApiShortxt" :rows="2" type="textarea" />
      </el-form-item>
      <el-form-item label="意见内容">
        <div style="width: 100%; height: 100%; border: 1px solid #ccc">
          <Toolbar
            :editor="editorRef"
            style="border-bottom: 1px solid #e8e8e8"
          />
          <Editor
            v-model="form.ApiMemo"
            class="wang-editor-content"
            :default-config="editorConfig"
            style="height: 500px"
            @on-created="handleCreated"
            @mouseover="changeEditor"
          />
        </div>
      </el-form-item>
      <el-form-item v-if="showAttachment" label="上传附件">
        <div style="width: 100%; height: auto">
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            drag
            show-file-list
            action="https://api.sanjianke.com/common/Upload/upload?file=apidoc&type=attachment"
            multiple
            :on-change="changeFileList"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              拖拽附件文件到这里
              <em>或点击上传</em>
            </div>
          </el-upload>
        </div>
        <div v-if="form.ApiID > 0" style="width: 100%; clear: both">
          <div
            v-for="(item, index) in form.Attachment"
            :key="index"
            style="width: 100%"
          >
            <div style="float: left; width: 50%">
              <a :href="item.fileurl" target="_blank">{{ item.filename }}</a>
            </div>
            <div
              style="float: right; width: 50px; text-align: right"
              @click="deleteFile(index)"
            >
              删除
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { doEdit } from '@/api/teamworkApidoc'

  import '@wangeditor/editor/dist/css/style.css'
  // import { IDomEditor } from '@wangeditor/editor'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

  export default defineComponent({
    name: 'TeamworkApidocEdit',
    components: { Editor, Toolbar },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const editorRef = shallowRef()

      const html = ref('')

      // const html = ref(
      //   '<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><p>hello world ~~~ </p><blockquote>blockquote</blockquote><pre><code class="language-javascript">const a = 100;</code></pre><p><img src="https://fastly.jsdelivr.net/gh/chuzhixin/image/table/vab-image-1.jpg" alt="" data-href="" style=""/></p>'
      // )
      const editorConfig = ref({
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {
            server:
              'https://api.sanjianke.com/common/Upload/upload?file=teamwork&type=image', // 你的服务器地址，注意：当前接口格式特殊与其他vab接口不同，请查看vip文档
            fieldName: 'file',
            allowedFileTypes: ['image/*'],
            mode: 'cors',
            headers: {}, // 如需传递token请写到在这里
          },
        },
      })

      const changeEditor = () => {
        const editor = editorRef.value
        console.log('isFullScreen', editor.isFullScreen)
        if (editor.isFullScreen) {
          state.showAttachment = false
        } else {
          state.showAttachment = true
        }
      }

      const handleCreated = (editor) => {
        editorRef.value = editor
        // console.log('isFullScreen', editor.isFullScreen)
      }
      onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
      })

      // const onSubmit = () => {
      //   $baseAlert(html.value)
      //   $baseMessage('模拟保存成功', 'success', 'vab-hey-message-success')
      // }

      const state = reactive({
        formRef: null,
        form: {
          // roles: [],
        },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        title: '',
        dialogFormVisible: false,
        showAttachment: true,
        fileList: [],
      })

      const changeFileList = () => {
        state.form.Attachment = []
        state.fileList.forEach((item) => {
          state.form.Attachment.push({
            filename: item.name,
            fileurl: item.response.url,
          })
        })

        console.log('fileList', state.form.Attachment)
      }

      const deleteFile = (index) => {
        state.form.Attachment.splice(index, 1)
        console.log('fileList', state.form.Attachment)
      }

      const showEdit = (row) => {
        if (!row) {
          state.title = '添加'
        } else {
          state.title = '编辑'
          state.form = Object.assign({}, row)
        }
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {
          // roles: [],
        }
        state.dialogFormVisible = false
      }
      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { msg } = await doEdit(state.form)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }

      return {
        ...toRefs(state),
        changeFileList,
        deleteFile,
        editorRef,
        html,
        editorConfig,
        changeEditor,
        handleCreated,
        // onSubmit,
        showEdit,
        close,
        save,
      }
    },
  })
</script>
